<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            margin: 0 auto;
        }
        table{
            width: 800px;
        }
        th,td{
            border: 1px solid #000;
        }
        td{
            background-color: rgb(242, 59, 87);
            color: #fff;
        }
        th{
            background-color: pink;
        }
        tr th:nth-child(5){
            color: palevioletred;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>订单详情页面</h1>
        价格：<input type="text" class="jg">
        数量：<input type="text" class="sl">
        地址：<input type="text" class="dz">
        <button onclick="add()">添加</button></div>
        <table>
            <thead>
                <tr>
                    <td>商品名称</td>
                    <td>商品价格</td>
                    <td>商品数量</td>
                    <td>总价</td>
                    <td>收货地址</td>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    
</body>
</html>
<script>
    var jg=document.querySelector('.jg');
    var sl=document.querySelector('.sl');
    var dz=document.querySelector('.dz');
    var tbody=document.querySelector('tbody');

    function cun(arr){
        localStorage.setItem('data',JSON.stringify(arr))
    }

    function qu(){
        var a=localStorage.getItem('data');
        if(a!=null){
            return JSON.parse(a)
        }else{
            return []
        }
    }

    function add(){
        var arr=qu();
        arr.push({
            price:jg.value,
            num:sl.value,
            address:dz.value
        });
        cun(arr);
        xr()
    }

    function xr(){
        tbody.innerHTML='';
        var arr=qu();
        for(var i=0;i<arr.length;i++){
            var tr=document.createElement('tr');
            tr.innerHTML=`
            <th>小米青春版PLUS</th>
                <th>${arr[i].price}</th>
                <th>${arr[i].num}</th>
                <th>${arr[i].price*arr[i].num}</th>
                <th>${arr[i].address}</th>
            `;
            tbody.appendChild(tr)
        };
    }

    xr()
</script>